<template>
  <div class="upload-history" v-loading="loading">
    <el-table :data="dataSource" stripe style="width: 100%">
      <el-table-column type="index" label="序号" width="50"></el-table-column>
      <el-table-column type="expand">
        <template slot-scope="{ row: { file_data } }">
          <el-table
            v-if="file_data.length"
            :border="false"
            :data="file_data"
            size="small"
            :show-header="false"
            style="width: 100%"
          >
            <el-table-column align="left" prop="name" min-width="200">
              <template slot-scope="{ row }">
                <div class="fileClick" @click="previewFileAppendPath(row, 1)">
                  <image-type :width="20" :fileType="row.type">{{
                    row.filename
                  }}</image-type>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column
        prop="time_stamp"
        label="上报编号"
        min-width="180"
      ></el-table-column>
      <el-table-column
        prop="desc"
        label="上报描述"
        min-width="80"
      ></el-table-column>
      <el-table-column prop="create_time" label="创建日期" min-width="80">
        <template slot-scope="{ row }">
          <span>{{ parseTime(row.create_time, "{y}-{m}-{d} {h}:{i}") }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="80">
        <template slot-scope="scope">
          <el-dropdown trigger="click" size="small">
              <span class="el-dropdown-link">
                更多<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  @click.native="$emit('onShowMonitor', scope.row)"
                >流程监控</el-dropdown-item>
                <el-dropdown-item
                  style="color: red"
                  @click.native="showDeleteConfirm(scope.$index, scope.row)"

                >删除</el-dropdown-item>
              </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { parseTime, previewFileAppendPath } from "@/utils/index.js";
export default {
  name: "UploadHistory",
  props: {
    dataSource: {
      type: Array,
      default: () => [],
    },
    loading: {
      type: Boolean
    },
  },
  components:{
    ImageType: () => import("@/components/ImageType"),
  },
  methods: {
    parseTime,
    previewFileAppendPath,
    // 显示删除确认框
    showDeleteConfirm(index, row) {
      this.$confirm("确认删除此记录吗？").then((res) => {
        this.$emit('onDeleteUpload', index, row)
      });
    }
  },
};
</script>

<style lang="scss">
.upload-history {
  padding: 12px;
  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
}
.fileClick {
  cursor: pointer;
}
</style>